<template>
  <!-- 导航栏 -->
  <van-nav-bar title="商品列表" left-arrow @click-left="$router.go(-1)" />
  <!-- 搜索框 -->
  <div class="search">
    <van-search
      readonly
      shape="round"
      background="#ffffff"
      :value="querySearch || '搜索商品'"
      show-action
      @click="$router.push('/search')"
    >
      <template #action>
        <van-icon class="tool" name="apps-o" />
      </template>
    </van-search>
  </div>
  <ul>
    <li>综合</li>
    <li>销量</li>
    <li>价格</li>
  </ul>
  <div class="goods-list">
    <GoodsItem
      v-for="item in proList"
      :key="item.goods_id"
      :item="item"
    ></GoodsItem>
  </div>
</template>

<script>
import { getProList } from '@/api/search'
import GoodsItem from '@/components/GoodsItem.vue'
export default {
  data() {
    return {
      proList: []
    }
  },
  methods: {},
  async created() {
    const {
      data: { list }
    } = await getProList({
      categoryId: this.categoryId,
      goodsName: this.querySearch,
      page: 1
    })
    this.proList = list.data
  },
  computed: {
    querySearch() {
      return this.$route.query.search
    },
    categoryId() {
      return this.$route.query.categoryId
    }
  },
  components: {
    GoodsItem
  }
}
</script>

<style scoped lang="less">
.tool {
  font-size: 24px;
  height: 40px;
  line-height: 40px;
}

ul {
  margin-top: 12px;
  display: flex;
  padding: 0 10px;
  gap: 5%;
  text-align: center;
  li {
    width: 30%;
  }
}

.goods-list {
  margin-top: 10px;
}
</style>
